﻿@page "/ToastService"

<PageTitle>@App.PageTitle("ToastService")</PageTitle>

<h1>ToastService</h1>

<p>
    The ToastService is a service that can be used to show toasts. It can be injected into a page and used to show
    different type of toasts.
</p>
<p>
    For a component to be useable by the ToastService, it needs to implement <code>IToastContentComponent&lt;T&gt;</code>
    where <code>T</code> represent the type of the data to be shown in the toast.
</p>
<p>
    The ToastService is automatically registered in the DI container with the <code>AddFluentUIComponents()</code> call.
</p>

<h2 id="toastcontainer">Toast container</h2>

<p>
    Toasts are rendered through the <code>&lt;FluentToastProvider /&gt;</code> component. This component needs to be added to the main layout of your application/site.
    You typically do this in the <code>MainLayout.razor</code> file at the end of the <code>&lt;main&gt;</code> section like this:
</p>

<CodeSnippet Language="razor">
    @(
@"<main>
    <nav>
        <!-- -->
    </nav>
    <div class=""content"">
        <article id=""article"">
            @Body
        </article>
    </div>
    <FluentToastProvider MaxToastCount=""10"" />
</main>"
    )
</CodeSnippet>

<blockquote>
    <p>
        <strong>IMPORTANT!!</strong>
    </p><p>
        For the <code>&lt;FluentToastProvider/&gt;</code> to work properly, it needs interactivity! If you are using "per page" interactivity or ASP.NET Core 8
        or above with <strong>Server Side Rendering</strong> , make sure to add a <code>@@rendermode</code> to
        either the provider itself or the component the provider is placed in.
    </p>
</blockquote>

<p>
    See the documentation below for more information about the <code>FluentToastProvider</code> parameters.
</p>

<h2 id="example">Examples</h2>

<p>
    See the <a href="/Toast">toast page</a> for examples of the different types of available toasts:
    <ul>
        <li>Confirmation toast</li>
        <li>Communication toast</li>
        <li>Progress toast</li>
    </ul>
</p>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(ToastService)" />

<ApiDocumentation Component="typeof(FluentToastProvider)" />

